
<template>
  <div class="app-container">
      <el-form :model="compForm" :inline="true"  ref="compForm" size="mini" :rules="compFormRules">
        <!-- <el-row> -->
          <!-- <el-col :span="4"> -->
            <el-form-item label="发送类型:" prop="smsType">
                <el-select clearable v-model="compForm.smsType" style="width: 180px" placeholder="请选择">
                  <el-option v-for="(item, index) in statusList" :key="index" :value="item.code" :label="item.name">
                  </el-option>
                </el-select>
            </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="4"> -->
            <el-form-item label="编号:" prop="smsCode">
              <el-input
                clearable
                maxlength="64"
                 style="width:180px"
                v-model="compForm.smsCode"
              ></el-input>
            </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="2"> -->
            <el-form-item >
              <el-button type="primary" @click="search()">查询</el-button>
            </el-form-item>
          <!-- </el-col> -->
        <!-- </el-row> -->
      </el-form>
    <el-row :gutter="10" class="btn-area">
      <el-col :span="24">
        <buttonName @clickEvent="clickEventDom"></buttonName>
       <!-- <el-button size="mini" type="primary" plain  @click="sendSms">发送消息</el-button> -->
      </el-col>
    </el-row>
    <div class="table">
      <div class="inner" ref="inner">
        <el-table
          :data="compList"
          :highlight-current-row="true"
          @row-click="getCurrentRow"
          border
          :header-cell-style="{
            textAlign: 'center'
          }"
          :height="maxHeight">
          <el-table-column align="center" label="序号" type="index" :index="indexMethod" show-overflow-tooltip width="60"></el-table-column>
          <el-table-column align="center" label="发送类型" prop="smsType" show-overflow-tooltip width="180">
            <template slot-scope="scope">
              <span>{{distribute[scope.row.smsType]}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="编号" prop="smsCode" show-overflow-tooltip width="180"></el-table-column>
          <el-table-column align="center" label="发送到" prop="smsSendIds" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column align="center" label="短信内容" prop="smsContent"  width="300" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="发送时间" show-overflow-tooltip prop="smsSendTime"></el-table-column>
          <el-table-column align="center" label="发送结果" show-overflow-tooltip prop="smsResult"></el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination
      class="pagination"
      small
      background
      ref="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total"
    ></el-pagination>

    <!-- 发送消息 -->
    <el-dialog
      width="700px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-el-drag-dialog
      title="发送消息"
      :visible.sync="sendSmsDialog"
      v-if="sendSmsDialog"
      :before-close="sendSmsDialogClose"
    >
      <el-form
        label-position="right"
        :model="sendSmsData"
        ref="sendSmsData"
        :rules="sendSmsDataRules"
        label-width="auto"
        size="mini"
      >
        <el-row>
            <el-col :span="22">
                <el-form-item prop="smsType"  label="发送类型：">
                 <el-radio-group v-model="radioX" size="mini" @change="queryCodeList">
                  <el-radio label="X" border>需求</el-radio>
                  <el-radio label="G" border style="margin-left:-10px">标书公告</el-radio>
                  <el-radio label="B" border style="margin-left:-10px">报名</el-radio>
                  <el-radio label="J" border style="margin-left:-10px">竞价</el-radio>
                  <el-radio label="D" border style="margin-left:-10px">订单</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
        </el-row>
         <el-row>
            <el-col :span="22">
              <el-form-item prop="smsCode"  label="数据选择：">
                <el-select v-model="sendSmsData.smsCode" @change="querySendList"  style="width:100%" filterable  clearable  placeholder="请选择">
                  <el-option
                    v-for="item in optionsSmsCode"
                    :key="item.code"
                    :label="item.code"
                    :value="item.code">
                    <span style="float: left">{{ item.code }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item prop="smsSendTcHzId"  label="货主/糖厂：">
                <el-select v-model="sendSmsData.smsSendTcHzId"  style="width:100%" filterable  clearable  placeholder="请选择">
                  <el-option
                    v-for="item in optionsTCHZ"
                    :key="item.dptId"
                    :label="item.dptName"
                    :value="item.dptId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
             <el-col :span="11">
              <el-form-item prop="smsSendGysId"  label="供应商：">
                <el-select v-model="sendSmsData.smsSendGysId"  style="width:100%" filterable  clearable  placeholder="请选择">
                  <el-option
                    v-for="item in optionsGys"
                    :key="item.uuid"
                    :label="item.fltName"
                    :value="item.uuid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22">
                <el-form-item label="短信内容：" prop="smsContent">
                  <el-input type="textarea" :rows="5" v-model="sendSmsData.smsContent"></el-input>
                </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="sendSmsDialogClose">关闭</el-button>
        <el-button size="mini" type="primary" @click="sendSmsTure">发送</el-button>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
          <div class="heis">
            <div class="left"><el-button plain type="primary" @click="sendSmsTure">发送</el-button></div>
            <div class="rigth"><el-button plain type="primary" @click="sendSmsDialogClose">关闭</el-button></div>
          </div>
      </div> -->
    </el-dialog>
  
  </div>
</template>

<script>
import {
  querySmslist,
  checkSysfleetList,
  queryTcAndHzList,
  sendSmsByMessage,
  querySmsCodeList,


  createCode,
  XLSupplierCreation, 
  getAuditUserToList, 
  addTmClientDetail, 
  editTmClientDetail, 
  deleteTmClientDetail,
  addImg,
  } from '@/request/api'
import resizeMixin from '@/mixins/resize'
import isAuth from '@/mixins/buttonAuth'
import paginationMixin from '@/mixins/pagination'
import buttonName from '@/components/buttonName/button-name.vue'
export default {
  name: 'router.custom',
  mixins: [resizeMixin, paginationMixin,isAuth],
  data() {
    return {
      sendSmsDialog:false,//发送消息弹框
      sendSmsData:{},//发送消息数据
      options:[],//供应商下拉
      optionsForTCHZ:[],//货主糖厂下拉
      optionsSmsCode:[],//选择数据下拉

      optionsGys:[],//供应商下拉
      optionsTCHZ:[],//货主糖厂下拉

      radioX:'X',

      distribute: {
        X: '需求',
        G: '标书公告',
        B: '报名',
        J: '竞价',
        D: '订单',
      },//发送类型

      statusList:[
        {code:'X',name:'需求'},
        {code:'G',name:'标书公告'},
        {code:'B',name:'报名'},
        {code:'J',name:'竞价'},
        {code:'D',name:'订单'},
      ],

      dialogFormStatus: '', //dialog 中 form 的状态 add/edit
      accountDisabled: true,
      messageDisabled: true,
      currentData: {},
      showDialog: false,
      showUpload:false,
      maxHeight: -1,
      operate: '',
      countryList: '',
      compForm: {
        cName: ''
      },
      flag:'',
      title:'上传',
      pic:false,

      url:'',//查看图片路径
      port:[],
      business:true,
      identityF:true,
      identityZ:true,
      compFormRules: {
        cName: [

        ]
      },
     sendSmsDataRules:{
        smsCode: [
                  { required: true, message: '请选择数据', trigger: 'blur' }
        ],
        smsContent:[
                  { required: true, message: '请输入短信内容', trigger: 'blur' },
                  { max: 400, message: '请输入400个字符以内', trigger: 'blur' }
        ],
      },
      compList: []
    }
  },
  computed: {
    grandson() {
      var dataList = []
      var number
      var arr = this.$route.path.split('/')
      number = arr.length - 1
      dataList = this.$store.state.user.permList
      for (var i = 0; i < dataList.length; i++) {
        for (var f = 0; f < dataList[i].Children.length; f++) {
          if (dataList[i].Children[f].MDL_CODE == arr[number]) {
            return dataList[i].Children[f].Grandson
          }
        }
      }
      return []
    }
  },
  mounted() {
    this.refreshList()
    //下拉框
    // XLSupplierCreation().then(res=>{
    //   // console.log(res,639)
    //   this.port=res.data.FTKJWLHYPT
    // })
  },
  beforeMount() {
    this.refreshList()
    queryTcAndHzList().then(res=>{
        this.optionsForTCHZ= res.data
      })
    checkSysfleetList({fltAuditstatus:'Y'}).then(res=>{
      this.options= res.data
    })
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  methods: {
      //调取父组件方法
    clickEventDom(item){
      if(item.mdlCode === 'sendSms'){
        this.sendSms()
      }
    },

    search() {
      this.refreshList()
    },

    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      querySmslist({
        smsType: this.compForm.smsType,
        smsCode: this.compForm.smsCode,
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(response => {
        // if(response.success==1){
        this.compList = response.data
        updateTotal(Number(response.total))
      })
    },

      // 获取当前选中行
    getCurrentRow(row) {
      this.currentData = row
    },

    // 发送消息弹框
    sendSms(){
        this.sendSmsData = {};
        this.optionsTCHZ = this.optionsForTCHZ
        this.optionsGys = this.options
        this.queryCodeList();
        this.sendSmsDialog = true
    },

    // 发送消息
    sendSmsTure(){
        this.$refs['sendSmsData'].validate(valid => {
        if (!valid) {
          // this.$message.error('必输项不能为空！')
          return false
        }
          if(!this.sendSmsData.smsSendGysId && !this.sendSmsData.smsSendTcHzId){
            this.$alert('请选择短信接收方：货主/糖厂或供应商！', '提示', {
              confirmButtonText: '确定'
            })
            return
          }
          sendSmsByMessage({
            smsType:this.radioX,
            smsCode:this.sendSmsData.smsCode,
            smsSendGysId:this.sendSmsData.smsSendGysId,
            smsSendTcHzId:this.sendSmsData.smsSendTcHzId,
            smsContent:this.sendSmsData.smsContent,
          }).then(res=>{
            if(res.success==='1'){
              this.$message({
                type:'success',
                message:'发送成功',
              })
              this.refreshList()
              this.radioX = 'X'
              this.sendSmsData = []
              this.sendSmsDialog = false
            }
          })
        })
    },

    //根据类型查询数据
    queryCodeList(){
      if(this.sendSmsData.smsCode){
         this.sendSmsData.smsCode =''
      }
      if(this.sendSmsData.smsSendTcHzId){
         this.sendSmsData.smsSendTcHzId =''
      }
      if(this.sendSmsData.smsSendGysId){
         this.sendSmsData.smsSendGysId =''
      }
        querySmsCodeList({smsType:this.radioX}).then(res=>{
          this.optionsSmsCode= res.data
        })
       this.optionsTCHZ = this.optionsForTCHZ
       this.optionsGys = this.options
    },

     //根据数据确定发送用户
    querySendList(){
      if(this.sendSmsData.smsSendTcHzId){
         this.sendSmsData.smsSendTcHzId =''
      }
      if(this.sendSmsData.smsSendGysId){
         this.sendSmsData.smsSendGysId =''
      }
       var nub = this.optionsSmsCode.find(n => n.code == this.sendSmsData.smsCode);
       let  tcHzList= [];
       let  gysList= [];
       if(this.radioX == 'X'){
          var tcHz = this.optionsForTCHZ.find(n => n.dptId == nub.sendId)
          tcHzList.push(tcHz)
       }else{
         this.optionsForTCHZ.forEach(element => {
           if(nub.sendId.indexOf(element.dptId)!= -1){
              tcHzList.push(element)
           }
         });
         this.options.forEach(element => {
           if(nub.sendId.indexOf(element.uuid)!= -1){
              gysList.push(element)
           }
         });
         if(gysList.length == 0){
           gysList = this.options
         }
       }
       this.optionsTCHZ = tcHzList
       this.optionsGys = gysList
    },

    //关闭发送信息弹框
    sendSmsDialogClose(){
        this.refreshList()
        this.radioX = 'X'
        this.sendSmsData = []
        this.sendSmsDialog = false
    },









    
    //查看图片
    viewPic(str){
      this.showUpload=true
      this.title='查看'
      this.pic=true
      this.url=this.dialogForm[str]
      console.log(this.url)
    },
    // 上传图片
    uploadImage ({ file }) {
      console.log(file,2222)
      addImg( file ).then(res => {
        if(res.success=='1'){
          if(this.flag==0){
            this.business=false
            this.dialogForm.cltCliTaxnoimage= window._$api.IMAGE_PREFIX + res.data.url

          }else if(this.flag==1){
            this.identityZ=false

            this.dialogForm.cltCliLegalimagep=window._$api.IMAGE_PREFIX + res.data.url
          }else{
            this.identityF=false

            this.dialogForm.cltCliLegalimageb=window._$api.IMAGE_PREFIX + res.data.url
          }
          this.$alert('图片上传成功！', '提示', {
            confirmButtonText: '确定'
          }).then(()=>{
            this.uploadClose()
          })
        }
      })
    },
    // 图片上传之前的检查
    beforeUpload(file) {
      console.log(file,5555)
      if (file.type.indexOf('image') === -1) {
        this.$message.error({
          message: '请上传正确的图片类型',
          showClose: true
        })
        return false
      }

      if (file.size / 1024 / 1024 > this.size) {
        this.$message.warning({
          message: '建议文件大小在5M以内',
          showClose: true
        })
        return false
      }
    },
    //上传
    UploadPic(str){
      this.title='上传'
      this.showUpload=true
      this.pic=false
      if(str=='identityF'){
        this.flag=2
      }else if (str=='identityZ'){
        this.flag=1
      }else{
        this.flag=0
      }

    },
    //关闭上传窗口
    uploadClose(){
      this.showUpload=false
    },

    uppercase(key) {
      this.dialogForm[key] = this.dialogForm[key].toUpperCase()
    },
    trimECode() {
      this.dialogForm.cltEgsname = this.dialogForm.cltEgsname.trim()
    },
   



    add() {
      let pre='CP'
        createCode(pre).then(res => {
          let t = this
          t.dialogForm.bcCode=res.msg
      
      }) 
      this.showDialog = true
      // $('#app',window.parent.document)

      this.operate = '新增产品大类信息'
      this.accountDisabled = false
      this.messageDisabled = false
      this.dialogFormStatus = 'add'
      // this.resetDialogForm()
      this.dialogForm={
        bcName: '',
        bcCode: '',
        bcIsdefault:'N',
        bcIsvalid: 'Y',
      }
      // this.business=true
      // this.identityF=true
      // this.identityZ=true

    },
    edit() {
      this.dialogFormStatus = 'edit'
      if (Object.keys(this.currentData).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.showDialog = true
      this.operate = '编辑产品大类信息'
      this.accountDisabled = true
      this.messageDisabled = false
      this.dialogForm = Object.assign({}, this.currentData)
    },
    del() {
      if (Object.keys(this.currentData).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }

      this.$confirm('您确认要删除此数据吗?', '提示', {
        closeOnClickModal: false
      })
        .then(() => {
          // try{
          deleteTmClientDetail(this.currentData.id).then(() => {
            // if(response.success==1){
            this.$message.success({
              message: '删除成功！',
              showClose: true
            })
            this.refreshList()
          })

        })
        .catch(()=> {})
    },
    save() {
      if (this.dialogFormStatus === 'add') {
        this.commitAdd('dialogForm')
      } else if (this.dialogFormStatus === 'edit') {
        this.commitEdit('dialogForm')
      }
    },
    commitAdd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {  
          addTmClientDetail(this.dialogForm).then((res) => {
            // console.log(res)
            if(res.success=='1'){
              this.$message.success({
                message: '新增数据成功！',
                showClose: true
              })
              this.showDialog = false
              this.currentData={}
              this.refreshList()
            }
          })

        }
      })
    },
    commitEdit(formName) {
      this.$refs[formName].validate(valid => {
        console.log(this.dialogForm)
        if (valid) {  
          editTmClientDetail(this.dialogForm).then((res) => {
            if(res.success=='1'){
              this.$message.success({
                message: '编辑数据成功！',
                showClose: true
              })
              this.showDialog = false
              this.currentData={}
              this.refreshList()
            }
          })
        }
      })
    },
    close(formName) {
      this.$refs[formName].clearValidate()

      this.showDialog = false
    },
    resetDialogForm() {
      return (this.dialogForm = {
        cltCode: '',
        cltName: '',
        fctFltId:'',
        cltEgsname: '',
        cltVlflag: 'Y',
        cltContact: '',
        cltCtctel: '',
        cltAccount: '',
        cltAddress: '',
        cltAgmclt:'Y',
        cltCliCode:'',
        cltCliAddress:'',
        cltCliLegalname:'',
        cltTypes:[],
        cltShtname:'',
        cltPorts:'',
        cltRegistorno:'',
        cltCliLegalid:'',
        cltRemark:'',
      })
    },
  
    storageDetail() {
      this.showDialog = true
      this.operate = '查看客户信息'
      this.accountDisabled = true
      this.messageDisabled = true
      this.dialogForm = Object.assign({}, this.currentData)
    },
    handleClose(done) {
      if (this.$refs.dialogForm) {
        this.$refs.dialogForm.clearValidate()
        done()
      }
    }
  },
  components: {
    buttonName
  },
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.pic{
  width:100%;
  // height:200px;
  img{
    width:100%;
    height:100%;
  }
}
.btn{
  padding-bottom:15px;
}
.heis{
  width: 100%;
  height: 65px;
  margin-top:-20px;
  margin-bottom:10px;
  .biao{
    width: 250px;
    height:60px;
    border: 2px solid #cccccc;
    line-height: 60px;
    font-size:16px;
    border-radius:8px;
    text-align: center;
    float: left;
      span{
        font-size: 18px;
        font-weight:bold;
        margin-top: 5px;
      }
  }
  .sysj{
    width: 422px;
    height: 60px;
    float: left;
    line-height: 60px;
    font-size: 18px;
    margin-left: 170px;
    position: relative;
    img{
      width: 50px;
      height: 50px;
      position: absolute;
      right: 0;
      top: 3px;
      // margin-left: 10px;
    }
  }
  .rigth{
    float: left;
    height: 60px;
    line-height: 60px;
    margin-left: 280px;
    margin-right: 50px;
    font-size: 16px;
    color: #6d9eeb;
  }
  .left{
    float: left;
    height: 60px;
    line-height: 60px;
    margin-left: 240px;
    margin-right: -200px;
    font-size: 16px;
    color: #6d9eeb;
  }
}
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .table {
    flex: 1;
    position: relative;
    overflow: hidden;

    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
